<template>
	<view class="big_box">
		<view class="reduce_box" @click="change('reduce')">-</view>
		<view class="input_box">
			<uni-easyinput 
				:inputBorder="false" 
				:clearable="false" 
				type="number" 
				:styles="{color:'#fff',textAlign:'center'}" 
				@input="change"
				:value="inputValue"
				:disabled="disabledValue"
				class="uni-input"
				:cursorSpacing="0"
				>
			</uni-easyinput>
		</view>
		<view class="add_box" @click="change('add')">+</view>
	</view>
	
</template>

<script>
export default {
  props: {
    maxValue: {
      type: Number,
      default: 100
    },
    minValue: {
      type: Number,
      default: 0
    },
    defaultValue: {
      type: Number,
      default: 0
    }
  },
  
  data() {
    return {
      inputValue: this.defaultValue || 50, // Initialize inputValue with defaultValue prop or 50
    };
  },

  methods: {
    // Method to change input value (increase or decrease or set manually)
    change(type) {
      if (type === 'add') {
        if (this.inputValue >= this.maxValue) {
          this.$emit('numberChange', this.inputValue);
          return;
        }
        this.inputValue++;
        this.$emit('numberChange', this.inputValue);
      } else if (type === 'reduce') {
        if (this.inputValue <= this.minValue) {
          this.$emit('numberChange', this.inputValue);
          return;
        }
        this.inputValue--;
        this.$emit('numberChange', this.inputValue);
      } else {
        this.inputValue = type;
        if (!this.isInteger(this.inputValue)) {
          setTimeout(() => {
            this.inputValue = Number(this.inputValue).toFixed(0);
            this.$emit('numberChange', this.inputValue);
          }, 200);
        }
        this.$emit('numberChange', this.inputValue);
      }
    },

    // Helper function to check if the number is an integer
    isInteger(obj) {
      return obj % 1 === 0;
    }
  },

  watch: {
    // Watch for prop changes and update local inputValue
    defaultValue(newVal) {
      this.inputValue = newVal || 50;
    }
  }
};
</script>

<style>
	.input_box{
		width:95rpx;
		color:white;
		background-color:#bcbcbc;
		margin:0rpx 5rpx;
		height:60rpx;
		border-radius:5rpx;
		display: flex;
		align-items: center;
		font-weight:bold;
	}
	.big_box{
		display: flex;
		align-items: center;
	}
	.reduce_box{
		width:60rpx;
		height:60rpx;
		background-color: #bcbcbc;
		text-align: center;
		border-radius:5rpx;
		color:white;
		font-weight: bold;
		line-height:60rpx;
	}
	.add_box{
		width:60rpx;
		height:60rpx;
		background-color: #bcbcbc;
		text-align: center;
		border-radius:5rpx;
		color:white;
		font-weight: bold;
		line-height:60rpx;
	}
</style>
